<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <!--  事件调用的方法没有参数-->
  <button style="color: red" @click="btn1Click()">按钮1-1</button>
  <button style="color: red" @click="btn1Click">按钮1-2</button>
  <!--  在事件定义时，写函数省略了小括号，凡是方法本身是需要小括号的-->
  <!--  这个时候，Vue会默认将浏览器生产的event事件对象作为参数传入到方法-->
  <button style="color: green" @click="btn2Click">按钮2-1</button>
  <!--  如果函数需要参数，但是没有传入，如果有括号的话，那么函数的形参为underfined-->
  <button style="color: green" @click="btn2Click()">按钮2-2</button>
  <button style="color: green" @click="btn2Click(123)">按钮2-3</button>
  <!--  定义方法时，我们需要event对象，同时又需要其他参数-->
  <!--  在调用方式，如何手动的获取到浏览器参数的event对象:  $event-->
  <button style="color: blue" @click="btn3Click(123,$event)">按钮3</button>
</div>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"Hello zk! "
    },
    methods:{
      btn1Click(){
        console.log("btn1Click");
      },
      btn2Click(event){
        console.log("------------------",event);
      },
      btn3Click(abc,event){
        console.log("++++++++++++++++++",abc, event);
      }
    }
  })
</script>
</body>
</html>
